extends ../_layout

block active
  - sidebar_active = 'panels.html'

block content
  h3 Panels
    small Panels can contain almost any kind of element inside

  .container-fluid
    // START row
    .row
      .col-lg-4
        // START panel
        #panelDemo1.panel.panel-default
          .panel-heading
            | Collapsible Panel
            a(href="#", data-tool="panel-collapse", data-toggle="tooltip", title="Collapse Panel").pull-right
              em.fa.fa-minus
          .panel-wrapper.collapse.in
            .panel-body
              p Panel can be collapsed clicking on the chevron up/down icon on the top right corner
            .panel-footer
              | Panel Footer
        // END panel
      .col-lg-4
        // START panel
        #panelDemo3.panel.panel-default.panel-demo
          .panel-heading.panel-heading-collapsed
            | Initially collapsed Panel
            a(href="#", data-tool="panel-dismiss", data-toggle="tooltip", title="Close Panel").pull-right
              em.fa.fa-times
            a(href="#", data-tool="panel-collapse", data-toggle="tooltip", title="Collapse Panel").pull-right
              em.fa.fa-plus
          // .panel-wrapper is the element to be collapsed
          .panel-wrapper.collapse
            .panel-body
              p Initially collapsed panel 
            .panel-footer
              | Panel Footer
        // END panel
      .col-lg-4
        // START panel
        #panelDemo2.panel.panel-default.panel-demo
          .panel-heading
            | Dismissable Panel
            a(href="#", data-tool="panel-dismiss", data-toggle="tooltip", title="Close Panel").pull-right
              em.fa.fa-times
          .panel-body
            p Panel can be dismissed by clicking on the cross icon icon on the top right corner
        // END panel
    // END row

    h4.page-header Panel Refresh

    // START row
    .row
      .col-lg-4
        // START panel
        .panel.panel-default#panelDemoRefresh1
          .panel-heading
            | Standard Spinner
            a(href="#", data-tool="panel-refresh", data-toggle="tooltip", title="Refresh Panel", data-spinner="standard").pull-right
              em.fa.fa-refresh
          .panel-body
            p Click on the refresh icon to see how it triggers a refresh-event while it shows a spinner
        // END panel
      .col-lg-4
        // START panel
        .panel.panel-default#panelDemoRefresh2
          .panel-heading
            | Custom Spinner
            a(href="#", data-tool="panel-refresh", data-toggle="tooltip", title="Refresh Panel", data-spinner="traditional").pull-right
              em.fa.fa-refresh
          .panel-body
            p Click on the refresh icon to see how it triggers a refresh-event while it shows a spinner
        // END panel
      .col-lg-4
        // START panel
        .panel.panel-default#panelDemoRefresh3
          .panel-heading
            | Another Spinner
            a(href="#", data-tool="panel-refresh", data-toggle="tooltip", title="Refresh Panel", data-spinner="line back-and-forth grow").pull-right
              em.fa.fa-refresh
          .panel-body
            p See the list of allowed spinner at the Spinners page. A real use example is at the chart page.
        // END panel
    // END row



  h4.page-header Panel Styles
  // START row
  .row
    .col-lg-4
      // START panel
      #panelDemo7.panel.panel-default
        .panel-heading Default Panel
        .panel-body
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer Panel Footer
      // END panel
    .col-lg-4
      // START panel
      #panelDemo8.panel.panel-primary
        .panel-heading Primary Panel
        .panel-body
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer Panel Footer
      // END panel
    .col-lg-4
      // START panel
      #panelDemo9.panel.panel-success
        .panel-heading Success Panel
        .panel-body
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer Panel Footer
      // END panel
  // END row
  // START row
  .row
    .col-lg-4
      // START panel
      #panelDemo10.panel.panel-info
        .panel-heading Info Panel
        .panel-body
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer Panel Footer
      // END panel
    .col-lg-4
      // START panel
      #panelDemo11.panel.panel-warning
        .panel-heading Warning Panel
        .panel-body
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer Panel Footer
      // END panel
    .col-lg-4
      // START panel
      #panelDemo12.panel.panel-danger
        .panel-heading Danger Panel
        .panel-body
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
        .panel-footer Panel Footer
      // END panel
  // END row
  // START row
  .row
    .col-lg-12
      // START panel
      #panelDemo13.panel.panel-default
        .panel-heading Collapsible Accordion Panel Group
        .panel-body
          #accordion.panel-group(role='tablist', aria-multiselectable='true')
            .panel.panel-default
              #headingOne.panel-heading(role='tab')
                h4.panel-title
                  a(data-toggle='collapse', data-parent='#accordion', href='#collapseOne', aria-expanded='true', aria-controls='collapseOne')           Collapsible Group Item #1        
              #collapseOne.panel-collapse.collapse.in(role='tabpanel', aria-labelledby='headingOne')
                .panel-body
                  | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
            .panel.panel-default
              #headingTwo.panel-heading(role='tab')
                h4.panel-title
                  a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapseTwo', aria-expanded='false', aria-controls='collapseTwo')           Collapsible Group Item #2        
              #collapseTwo.panel-collapse.collapse(role='tabpanel', aria-labelledby='headingTwo')
                .panel-body
                  | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.
            .panel.panel-default
              #headingThree.panel-heading(role='tab')
                h4.panel-title
                  a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapseThree', aria-expanded='false', aria-controls='collapseThree')           Collapsible Group Item #3        
              #collapseThree.panel-collapse.collapse(role='tabpanel', aria-labelledby='headingThree')
                .panel-body
                  | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.


      // END panel
  // END row
  // START row
  .row
    .col-lg-12
      // START panel
      #panelDemo14.panel.panel-default
        .panel-heading Basic Tabs
        .panel-body
          div(role='tabpanel')
              // Nav tabs
              ul.nav.nav-tabs(role='tablist')
                li.active(role='presentation')
                  a(href='#home', aria-controls='home', role='tab', data-toggle='tab') Home
                li(role='presentation')
                  a(href='#profile', aria-controls='profile', role='tab', data-toggle='tab') Profile
                li(role='presentation')
                  a(href='#messages', aria-controls='messages', role='tab', data-toggle='tab') Messages
                li(role='presentation')
                  a(href='#settings', aria-controls='settings', role='tab', data-toggle='tab') Settings
              // Tab panes
              .tab-content
                #home.tab-pane.active(role='tabpanel') Suspendisse velit erat, vulputate sit amet feugiat a, lobortis nec felis. 
                #profile.tab-pane(role='tabpanel') Integer lobortis commodo auctor. 
                #messages.tab-pane(role='tabpanel') Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                #settings.tab-pane(role='tabpanel') Sed commodo tellus ut mi tristique pharetra. 

      // END panel
  // END row

  // START row
  .row
    .col-lg-4
      .well
        h4 Normal Well
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
    .col-lg-4
      .well.well-lg
        h4 Large Well
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

    .col-lg-4
      .well.well-sm
        h4 Small Well
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
  // END row
  // START row
  .row
    .col-lg-12
      .jumbotron
        h1 Jumbotron
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing.
        p
          a.btn.btn-primary.btn-lg(role='button') Learn more
  // END row

block vendor_js
  script(src='js/demo/demo-panels.js')
